<template>
  <view class="h-80 over-hidden">
    <view class="h-79 top-0 left-0 w-full coupon flex items-center">
      <view class="top-tip">新人券</view>
      <view
        class="text-red w-100 h-full flex items-center justify-center left-coupon"
      >
        <view>
          <text class="text-12">￥</text>
          <text class="text-24 text-bold">10</text>
        </view>
      </view>
      <view class="flex justify-between flex-1 px-12 items-center">
        <view class="pl-12 color-black">
          <view class="text-16 ellipsis-1 text-bold">新人券-立减10元</view>
          <view class="text-12 pt-8 ellipsis-1">仅剩86天10时1分</view>
        </view>
        <view>
          <u-button
            custom-style="height:64rpx;padding:0 24rpx"
            text="领取"
            color="red"
            shape="circle"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  border-radius: 24rpx;
  position: relative;
  background-color: #fcf2f2;
  border: 1rpx solid #e88992;
  box-sizing: border-box;
  .top-tip {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 10px;
  }
  .left-coupon {
    box-sizing: border-box;
    border-right: 1px dashed #e88992;
  }

  &:before {
    content: " ";
    width: 24rpx;
    height: 24rpx;
    background-color: #fff;
    border: 0.5px solid #e88992;
    border-radius: 50%;
    position: absolute;
    top: -14rpx;
    left: 188rpx;
  }

  &:after {
    content: " ";
    width: 24rpx;
    height: 24rpx;
    background-color: #fff;
    border: 0.5px solid #e88992;
    border-radius: 50%;
    position: absolute;
    bottom: -14rpx;
    left: 188rpx;
  }
}
</style>
